<!-- 会员管理的组件 -->
<template>
<div>
  <!-- 将获取到的数据进行计算 -->
  <el-table :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%">
    <el-table-column prop="id" label="注册id号" width="180"></el-table-column>
    <el-table-column prop="username" label="姓名" width="180"></el-table-column>
    <el-table-column prop="is_admin" label="权限"></el-table-column>
    <el-table-column align="right">
      <template slot-scope="scope">
        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="tabListPage">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>
  </div>
</div>
</template>

<script>
import qs from 'qs'

export default {
  // eslint-disable-next-line space-before-function-paren
  data() {
    return {
      // 默认显示第几页
      currentPage: 1,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 19,
      // 个数选择器（可修改）
      pageSizes: [8, 16, 24, 32],
      // 默认每页显示的条数（可修改）
      PageSize: 9,

      tableData: [],
      search: ''
    }
  },
  created () {
    this.getqiantaiuser()
  },
  methods: {
    // 分页
    // 每页显示的条数
    handleSizeChange (val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1
    },
    // 显示第几页
    handleCurrentChange (val) {
      // 改变默认的页数
      this.currentPage = val
    },
    // 删除
    handleDelete (index, row) {
      console.log(row.id)
      this.$message({
        message: '删除成功',
        type: 'error'
      })
      //
      this.$axios({
        method: 'post',
        url: 'http://47.106.237.228:10003/api/qiantaiyonghu_shanchu',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        data: qs.stringify({
          id: row.id
        })
      })
        .then(res => {
          // console.log(res.data);
          //
          if (res.data.data === 200) {
            // 刷新
            location.reload()
          }
        })
        .catch(err => {
          console.log(err)
        })

      //
    },
    async getqiantaiuser () {
      try {
        //! !!URL一定要吧反单引号包起来
        const res = await this.$axios.post('http://47.106.237.228:10003/api/qiantai/yonghu')
        // console.log(this.page);
        // console.log(res)
        const users = res.data.data
        this.tableData = users
        // this.users = users
        // console.log(users.length)
        this.totalCount = users.length
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less">

</style>
